<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-07-24 18:11:12
 * @LastEditTime: 2023-10-08 22:51:24
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/views/inventoryDetail.vue
 -->
<template>
  <div class="inventory-detail">
    <div class="top-content">
      <div class="top-title">
        <span class="status">盘点中</span>
        <span>{{ info.name }}</span>
      </div>
      <div class="top-label">
        <span>总资产数</span>
        <span>{{ Number(unreadCount) + Number(alreadyCount) }}</span>
      </div>
      <div class="top-label">
        <span>盘点批次</span>
        <span>{{ info.batch }}</span>
      </div>
    </div>
    <tab
      :line-width="2"
      v-model="active"
      active-color="rgb(80, 119, 185)"
      custom-bar-width="50px"
    >
      <tab-item selected @on-item-click="handler">未盘 ({{ unreadCount || 0 }})</tab-item>
      <tab-item @on-item-click="handler"
        >已盘 ({{ alreadyCount || 0 }})</tab-item
      >
    </tab>

    <div class="list">
      <template v-if="list.length > 0">
        <div
          class="item"
          v-for="(item, index) in list"
          :key="index"
          
        >
          <!-- <div class="title">
          <span :class="`tag-${item.type} tag`">{{ item.typeName }}</span>
          <span class="name">{{item.sort}}</span>
          <x-icon class="more" type="ios-arrow-right"></x-icon>
        </div> -->
        <div @click="toLog(item.assetId)">
          <div class="title">
            <span :class="`tag-${item.borrowState} tag`">{{
              getStatus(item.borrowState)
            }}</span>
            <span class="name">{{ item.assetName }}</span>
            <x-icon class="more" type="ios-arrow-right"></x-icon>
          </div>
          <div class="label">
            <span class="title">资产数字ID</span>
            <span class="name">{{ item.assetCode }}</span>
          </div>
          <div class="label">
            <span class="title">资产分类</span>
            <span class="name">{{ item.className }}</span>
          </div>
        </div>
          <div class="label" v-if="active == 0" @click="selectItem(index)">
            <check-icon v-model="item.check"></check-icon>
          </div>
          <!-- <div class="label">
          <span class="title">品牌</span>
          <span class="name">{{ item.brand }}</span>
        </div>
        <div class="label">
          <span class="title">规格型号</span>
          <span class="name">{{ item.model }}</span>
        </div> -->
        </div>
      </template>
      <template v-else>
        <no-data></no-data>
      </template>
    </div>
    <div class="submit-box" v-if="active == 0">
      <check-icon :value.sync="allCheck" @click.native="changeAllCheck"
        >全选</check-icon
      >
      <x-button class="submit-btn" @click.native="submit">批量盘点</x-button>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, CheckIcon, XButton } from "vux";
import AssetApi from "@/api/asset.js";
export default {
  components: {
    Tab,
    TabItem,
    CheckIcon,
    XButton
  },
  data() {
    return {
      info: {
        name: "办公用品盘点",
        sum: "113",
        batch: "2023-05-24~2023-05-31",
        batched: 100,
        unBatch: 8,
      },
      list: [
        {
          id: "123456",
          sort: "家具",
          num: 1,
          userName: "",
          type: "1",
          typeName: "已盘",
        },
        {
          id: "1234567",
          sort: "饮水机",
          num: 1,
          userName: "张三",
          type: "2",
          typeName: "未盘",
        },
      ],
      active: 0,
      alreadyCount: 0,
      unreadCount: 0,
      allCheck:false
    };
  },
  mounted() {
    this.alreadyCount = this.$route.query.alreadyCount;
    this.unreadCount = this.$route.query.unreadCount;
    this.getList();
  },
  methods: {
    handler(index) {
      // this.active = index;
      console.log(128, this.active);
      this.getList();
    },
    toLog(id) {
      this.$router.push({
        path: "log",
        query: {
          id: id,
          inventory: this.active==0?1:0,
          checkId: this.$route.query.checkId,
        },
      });
    },
    getList() {
      let _params = {
        checkId: this.$route.query.checkId,
        pageNum: 1,
        pageSize: 1000,
      };
      let ApiObj = ["findUnreadAll", "findReadAll"];
      AssetApi[ApiObj[this.active]](_params).then((res) => {
        if (res.code == "0000") {
          this.list = res.data.records.map((item) => {
            let temp = item;
            temp.check = false;
            return temp;
          });
        }
      });
    },
    changeAllCheck() {
      for (let i in this.list) {
        this.list[i].check = this.allCheck;
      }
    },
    selectItem(index) {
      this.list[index].check = !this.list[index].check;
      let checkList = this.list.filter((item) => item.check);
      if (checkList.length == this.list.length) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    submit() {
      let list = this.list.filter((item) => item.check) || [];
      if (list.length == 0) {
        this.$vux.toast.show({
          text: "请选择需要盘点的资产",
          type: "warn",
        });
      } else {
        let ids = list.map((item) => {
          return item.assetId;
        });

        let _params = {
          checkId: this.$route.query.checkId,
          ids: ids.toString(),
        };
        AssetApi.assetCheckUpdate(_params).then((res) => {
          this.$vux.toast.show({
            text: "资产盘点提交成功",
          });
          this.$router.push("/asset/inventory")
        });
      }
    },
    getStatus(state) {
      let text = "未出借";
      switch (state) {
        case 0:
          text = "未出借";
          break;
        case 1:
          text = "出借待确认";
          break;
        case 2:
          text = "出借中";
          break;
        case 3:
          text = "归还待确认";
          break;
        default:
          text = "未出借";
          break;
      }
      return text;
    },
  },
};
</script>

<style lang="less" scoped>
.top-content {
  padding: 0 15px;
  border-bottom: 5px solid #f1f1f1;
  .top-title {
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .status {
      background: rgb(49, 112, 180);
      color: #fff;
      padding: 4px 6px;
      display: inline-block;
      margin-right: 10px;
      height: 12px;
      line-height: 12px;
      font-size: 12px;
      border-radius: 4px;
    }
  }
  .top-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #f1f1f1;
  }
}
.list {
  height: auto;
  background: #f1f1f1;
  padding: 10px;
  .item {
    padding: 10px 15px;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;

    .title {
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .tag {
        color: #fff;
        position: relative;
        display: inline-block;
        padding: 0 3px 0 6px;
        font-size: 12px;
        line-height: 20px;
        height: 20px;
        border-radius: 4px 0 0 4px;
        &::after {
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          //   border-top: 8px solid red;
          content: "";
          position: absolute;
          top: 6px;
          right: -14px;
          width: 0;
          z-index: 99;
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
      }
      .tag-1 {
        background: rgb(87, 184, 135);
        &::after {
          border-top: 8px solid rgb(87, 184, 135);
        }
      }
      .tag-2 {
        background: rgb(53, 120, 230);
        &::after {
          border-top: 8px solid rgb(53, 120, 230);
        }
      }
      .tag-3 {
        background: rgb(240, 153, 82);
        &::after {
          border-top: 8px solid rgb(240, 153, 82);
        }
      }
      .name {
        display: inline-block;
        margin-left: 20px;
      }
      .more {
        position: absolute;
        right: 0px;
      }
    }

    .label {
      display: flex;
      justify-content: flex-start;
      height: 30px;
      line-height: 30px;
      color: rgb(127, 127, 127);

      .title {
        display: inline-block;
        width: 100px;
      }
    }
  }
}
.inventory-detail{
  padding-bottom: 62px;
}
.submit-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 10px 0;
  background: #fff;
  .submit-btn {
    width: 260px;
    height: 36px;
    border-radius: 20px;
    color: #fff;
    margin: 0 auto;
    border-color: rgb(205, 166, 105);
    background: rgb(205, 166, 105);
    line-height: 36px;
    font-size: 16px;
  }
}
</style>
